<template>
    <div>
        <!-- <h4>基础地图</h4> -->
        <div id="container"></div>
         <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
// import {index2} from '/index2.js'
let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "bfc4628de1efdb7a10d5a97be15d4cc1",
    };
    AMapLoader.load({
        key: "f8688af27c7f44f9904a27c6fa90a510", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                resizeEnable: true
            });
            var marker = new AMap.Marker({
                map: map,
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [116.405467, 39.907761]
            });
            var lineArr = [
                [116.368904, 39.913423],
                [116.382122, 39.901176],
                [116.387271, 39.912501],
                [116.398258, 39.904600]
            ];
            var circle = new AMap.Circle({
                map: map,
                center: lineArr[0],          //设置线覆盖物路径
                radius: 1500,
                strokeColor: "#3366FF", //边框线颜色
                strokeOpacity: 0.3,       //边框线透明度
                strokeWeight: 3,        //边框线宽
                fillColor: "#FFA500", //填充色
                fillOpacity: 0.35//填充透明度
            });
            var polygonArr = [[116.403322, 39.920255],
            [116.410703, 39.897555],
            [116.402292, 39.892353],
            [116.389846, 39.891365]];
            var polygon = new AMap.Polygon({
                map: map,
                path: polygonArr,//设置多边形边界路径
                strokeColor: "#FF33FF", //线颜色
                strokeOpacity: 0.2, //线透明度
                strokeWeight: 3,    //线宽
                fillColor: "#1791fc", //填充色
                fillOpacity: 0.35//填充透明度
            });
            map.setFitView();

            function showInfoM(e) {
                var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置点击了marker！'
                document.querySelector("#text").innerText = text;
            }
            function showInfoC(e) {
                var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置点击了圆！'
                document.querySelector("#text").innerText = text;
            }
            function showInfoP(e) {
                var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置点击了多边形！'
                document.querySelector("#text").innerText = text;
            }
            function showInfoOver(e) {
                var text = '鼠标移入覆盖物！'
                document.querySelector("#text").innerText = text;
            }
            function showInfoOut(e) {
                var text = '鼠标移出覆盖物！'
                document.querySelector("#text").innerText = text;
            }

            function clickOn() {
                log.success("绑定事件!");

                marker.on('click', showInfoM);
                circle.on('click', showInfoC);
                polygon.on('click', showInfoP);

                marker.on('mouseover', showInfoOver);
                circle.on('mouseover', showInfoOver);
                polygon.on('mouseover', showInfoOver);

                marker.on('mouseout', showInfoOut);
                circle.on('mouseout', showInfoOut);
                polygon.on('mouseout', showInfoOut);
            }
            function clickOff() {
                log.success("解除事件绑定!");

                marker.off('click', showInfoM);
                circle.off('click', showInfoC);
                polygon.off('click', showInfoP);

                marker.off('mouseover', showInfoOver);
                circle.off('mouseover', showInfoOver);
                polygon.off('mouseover', showInfoOver);

                marker.off('mouseout', showInfoOut);
                circle.off('mouseout', showInfoOut);
                polygon.off('mouseout', showInfoOut);
            }

            // 给按钮绑定事件
            document.getElementById("clickOn").onclick = clickOn;
            document.getElementById("clickOff").onclick = clickOff;
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<style lang="scss" scoped>
html,
body,
#container {
    height: 800px;
    width: 800px;
}
</style>